<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/common/taglibs.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript"
	src="${ ctx}/scripts/jquery/jquery-1.8.2.min.js"></script>
<link href="${ ctx}/skins/floatstyle.css" rel="stylesheet"
	type="text/css" />

<script type="text/javascript"
	src="${ ctx}/scripts/jquery/jquery.qtip-1.0.0-rc3.js"></script>
<!-- 头像信息提醒控制 -->
<script type="text/javascript" src="${ ctx}/scripts/article.js"></script>
<link href="${ ctx}/skins/home.css" rel="stylesheet" type="text/css" />
<!-- 博文主体样式 -->
<link href="${ ctx}/skins/picturemodel.css" rel="stylesheet"
	type="text/css" />
<!-- 博文中多幅图片模板设计 -->

<c:set value="${param.userId }" var="userId"></c:set>

<title>个人的主页</title>
<style type="text/css">
.page-content {
	width: 1200px;
	margin: 0 auto;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	position: relative;
	padding-top: 20px;
}

#column-main {
	width: 665px;
	float: left;
	border-left: dotted 0px;
	background-color: rgba(232, 240, 238, 0.16);
	padding-left: 10px;
	border-left: dotted 0px;
	/*length> <length> <length>? <length>? || <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色*/
	padding-right: 20px;
	-moz-box-shadow: 0 10px 20px #b0b3b6;
	/*我们在这里设置阴影，同时设置padding-right使得其偏向于右边，（注：需要设置boreder当然需要设置其宽度为0使其看不见）*/
	-webkit-box-shadow: 0 10px 20px #b0b3b6;
	box-shadow: 0 10px 20px #b0b3b6;
}

#column-left {
	margin-right: 2px;
	margin-left: 50px;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 50px;
	width: 160px;
	float: left;
}

.PRF_tab_noicon {
	width: 665px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	font: normal 16px/40px "Microsoft Yahei";
	_background-image: none;
	border-color: #ffffff;
	display: block;
	color: #333;
}

.PRF_tab_noicon .pftb_ul {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	height: 49px;
	padding-left: 20px;
	_overflow: hidden;
	border-color: #d7eefb;
	display: block;
	list-style-type: disc;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 40px;
	s
}

.PRF_tab_noicon .pftb_itm {
	float: left;
	border-width: 1px;
	border-style: solid;
	border-right-width: 0;
	height: 48px;
	border-color: #d7eefb;
	display: list-item;
	text-align: -webkit-match-parent;
	list-style: none;
}

.PRF_tab_noicon .pftb_lk {
	display: block;
	width: 116px;
	height: 38px;
	padding: 8px 0 0;
	border-width: 1px;
	border-style: dotted;
	line-height: 27px;
	text-align: center;
	border-color: #F3D4D4;
	background-color: #F2F2F2;
}

.njupt-avatar {
	width: 160px;
	height: 160px;
	max-width: 160px;
	border-color: rgba(23, 82, 55, 0.53);
	border-radius: 10px;
	border-width: 3px;
	border-style: solid;
	float: left;
}

.njupt-name {
	font: normal 20px/30px 'Microsoft Yahei';
	color: #888;
	margin-right: 3px;
}

.mark-star {
	float: right;
	position: absolute;
	padding-left: 591px;
	margin-top: -6px;
}

.nupt-line-buttom {
	height: 10px;
	margin-left: -57px;
	background: url('${ctx}/img/feed-line.png') -612px bottom no-repeat;
}

.nupt-line-top {
	height: 10px;
	margin-left: -2px;
	background: url('${ctx}/img/feed-line.png') 0 0 no-repeat;
}

.feed-com {
	position: relative;
	zoom: 1;
	border: dotted 0px;
	padding: 1px 1px;
	background-color: rgba(245, 245, 245, 0.4);
	float: left;
}

.feed-com .feed-ft-triangle {
	width: 15px;
	height: 15px;
	position: relative;
	top: -15px;
	left: 555px;
	z-index: 1;
	background: url('${ctx}/img/feed-triangle.png') no-repeat;
}

.feed-comment-input {
	margin-top: -10px;
	width: 576px;
	border-radius: 4px;
	overflow: hidden;
	color: #666;
	background: #f7f8f8;
	border: 1px solid #C9CACC;
	border-bottom: 1px solid #B1B3B5;
	box-shadow: 0 1px 1px #C9CACC;
	height: 28px;
	font-size: large;
}

.article-title {
	text-align: center;
	font-size: 16px;
	color: rgb(37, 31, 65);
	font-weight: 900;
}
</style>

<!--  设置公共变量   -->
<script type="text/javascript">
	var ctx = "${ctx}";
</script>

<script type="text/javascript">
	/*
	 * 获取当前活动的tab序列
	 */
	function getActiveIndex() {
		var index = 0; //默认为0
		$(".pftb_lk").each(function(i) {
			if ($(this).attr("data-status") == "active") {
				index = i;
				return;
			}
		});
		return index;
	}

	$(document)
			.ready(
					function() {

						readyArticle(); //加载博文功能的article.js脚本实现

						//初始化数据
						$.post("${ctx}/common/RequestBlog.jsp", {
							"actionSerial" : 4,
							"userId" : "${userId}",
							"description" : "第一次获取我的博文"
						}, function(data) {
							$("#feed-list").html(data);
							avatarInfo();
						});

						$(window)
								.bind(
										'scroll',
										function() {
											if ($(window).scrollTop()
													+ $(window).height() >= $(
													document).height()) { // 如果到达页底的话，两者应该相等
												var lastArticleId = $(
														".feed-photo:last-child")
														.attr("data-articleid"); // 获取当前载入数据中，博文最旧id 其实就是Id最小的博文
												var activeIndex = getActiveIndex();

												$
														.post(
																ctx
																		+ "/common/RequestBlog.jsp",
																{
																	"actionSerial" : 5 + 2 * parseInt(activeIndex),
																	"count" : 3,
																	"userId" : "${userId}",
																	"lastArticleId" : lastArticleId
																},
																function(data) {
																	if ((/pop-content/g)
																			.test(data))
																		$(
																				"#feed-list")
																				.append(
																						data);
																	avatarInfo();
																});
											}
										});

						$(".pftb_lk")
								.live(
										"click",
										function() {
											var _this = $(this);
											$(".pftb_lk").each(
													function(i) {
														$(this).attr("style",
																"").attr(
																"data-status",
																"inactive");
													});
											_this.attr("style",
													"background-color:#fff;")
													.attr("data-status",
															"active");
											;

											var activeIndex = getActiveIndex();
											$
													.post(
															"${ctx}/common/RequestBlog.jsp",
															{
																"actionSerial" : 4 + 2 * parseInt(activeIndex),
																"userId" : "${userId}"
															},
															function(data) {
																$("#feed-list")
																		.html(
																				data);
																avatarInfo();
															});

										});

					});
</script>

</head>
<body>

	<%@ include file="/common/header.jsp"%>
	<div class='page-content'>

		<!-- 做边框个人信息 -->
		<div id='column-left'><%@ include
				file="/common/left_blog_index.jsp"%></div>

		<div id="column-main">

			<c:if test="${me.id!=param.userId }">
				<!-- 个人信息显示 ： 如毕业学校、个人简介、地点等等 -->
				<nativeSql:sqlQueryForList
					sql="select  *  from app_user where f_id = ${ userId }"
					id="userPersonalInfo" />
				<div>

					<img class="njupt-avatar"
						src="${ctx}/user/file.action?method:previewPic&fileId=${userPersonalInfo[0].f_picture_appended }"></img>
					<div style="float: left; padding-left: 10px;">
						<span class="njupt-name"> ${userPersonalInfo[0].f_username}</span><br>
						<strong>真实姓名：</strong>
						<c:if test="${empty userPersonalInfo[0].f_realname }"> 该用户还没有此项信息 </c:if>
						${userPersonalInfo[0].f_realname} <br> <strong>联系方式：</strong>
						<c:if test="${empty userPersonalInfo[0].f_email }"> 该用户还没有此项信息 </c:if>
						${userPersonalInfo[0].f_email}<br> <strong>个人简介：</strong>
						<c:if test="${empty userPersonalInfo[0].f_about }"> 该用户还没有此项信息 </c:if>
						${userPersonalInfo[0].f_about}
					</div>


				</div>
			</c:if>

			<c:if test="${me.id==param.userId}">
				<ul id="publishPostBar" class="m-nav2">
					<nativeSql:sqlQueryForUnique
						sql="select f_picture_appended as avatarId from app_user  where f_id = ${me.id }"
						id="meavatar" />
					<li><a class="publishlink-user" href="javascript:void(0);"><img
							alt="头像"
							src="${ctx}/user/file.action?method:previewPic&fileId=${meavatar.avatarId }"></img>
					</a></li>
					<li><a class="publishlink-text"
						href="${ctx }/blog/newArticleForm.jsp?type=text"><img alt="文字"
							src="${ctx }/img/eheader1.png"></img> </a></li>
					<li><a class="publishlink-picture"
						href="${ctx }/blog/newArticleForm.jsp?type=picture"><img
							alt="图片" src="${ctx }/img/eheader2.png"></img> </a></li>
					<li><a class="publishlink-music"
						href="${ctx }/blog/newArticleForm.jsp?type=music"><img
							alt="音乐" src="${ctx }/img/eheader3.png"></img> </a></li>
					<li><a class="publishlink-video"
						href="${ctx }/blog/newArticleForm.jsp?type=video"><img
							alt="视频" src="${ctx }/img/eheader4.png"></img> </a></li>
				</ul>
			</c:if>


			<div style="clear: both;"></div>

			<c:if test="${me.id==param.userId}">

				<!-- 导航栏 ： 如 我收藏的博文。我发布的博文等等  -->
				<div class="PRF_tab_noicon">
					<ul class="pftb_ul">
						<li class="pftb_itm"><a class="pftb_lk" data-index="0"
							style="background-color: #fff;" data-status="active">我的博文</a>
						</li>
						<li class="pftb_itm"><a class="pftb_lk" data-index="1"
							data-status="inactive">我的收藏</a>
						</li>
						<li class="pftb_itm"><a class="pftb_lk" data-index="2"
							data-status="inactive">我的回复</a>
						</li>
					</ul>
				</div>
			</c:if>


			<!-- 信息显示窗口 -->
			<div class="feed-list" id="feed-list">
				<center>
					<img style="padding-top: 36px; padding-bottom: 36px;"
						src="${ctx }/img/loading.gif">
				</center>
			</div>

			<br>
			<br>





		</div>
		<div id='column-left'><%@ include file="/common/right_blog.jsp"%></div>
	</div>


</body>
</html>